<template >
  <el-tabs type="border-card" tab-position="left" style="width:100%">
    <!-- 积分详情 -->
    <el-tab-pane label="积分详情">
      <Table
        :request-data="integralDetail.requestData"
        v-on:list="integralDetailListHander"
        ref="table"
      >
        <template slot="search-box">
          <div class="integral-box">
            <span>我的积分余额：</span>
            <span style="color:#ff5a00;font-size:20px;margin-right:2px;">{{user.integral}}</span>
            <span>分</span>
          </div>
        </template>
        <template slot="table-box">
          <el-table :data="integralDetail.tableData" stripe style="width: 100%" height="570">
            <el-table-column label="日期" width="180">
              <template slot-scope="scope">
                <span>{{$utils.formatDateTime(scope.row.add_time)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="integral" label="积分" width="100">
              <template slot-scope="scope">
                <span
                  :style="scope.row.integral>0?'color:#5cb85c':'color:#f7b7b7'"
                >{{scope.row.integral>0?'+'+scope.row.integral:scope.row.integral}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="text" label="详情" width="200"></el-table-column>
            <el-table-column prop="other" label="备注">
              <template slot-scope="scope">
                <el-popover
                  placement="top-start"
                  width="500"
                  trigger="hover"
                  :content="scope.row.other"
                >
                  <a class="link" slot="reference">
                    <span class="one-line">{{scope.row.other}}</span>
                  </a>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </Table>
    </el-tab-pane>
    <!-- 装备交易 -->
    <el-tab-pane label="我是买家">
      <game-order />
    </el-tab-pane>
    <!-- 装备交易 -->
    <el-tab-pane label="我是卖家">
      <el-tabs tab-position="top">
        <el-tab-pane label="已卖出的装备">
          <has-sold />
        </el-tab-pane>
        <el-tab-pane label="出售中的装备">
          <on-sell />
        </el-tab-pane>
      </el-tabs>
    </el-tab-pane>
    <!-- 积分兑换 -->
    <el-tab-pane label="积分兑换">
      <goods-order />
    </el-tab-pane>
    <!-- 收货地址 -->
    <el-tab-pane label="收货地址">
      <!-- header -->
      <el-row type="flex" align="middle">
        <el-col :span="2">
          <img style="width:60px;height:60px" src="../../assets/myinfo.png" alt />
        </el-col>
        <el-col :span="22">
          <el-row style="font-size:22px;color:#000;">个人资料</el-row>
          <el-row
            style="font-size:14px;"
          >请在这里填写常用地址，并选一个首选地址，当您兑换实物礼品，系统将礼品快递到您的首选地址，请务必填写正确。您最多可以设置5条常用地址</el-row>
        </el-col>
      </el-row>
      <!-- body -->
      <el-table :data="addressList" stripe style="width: 100%">
        <el-table-column prop="name" label="姓名" width="180">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.name"
              placeholder="填写收货人"
              clearable
              size="small"
              v-show="currentEdit==scope.$index"
            ></el-input>
            <span v-show="currentEdit!=scope.$index">{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="收货地址">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.address"
              placeholder="填写收货地址"
              clearable
              size="small"
              v-show="currentEdit==scope.$index"
            ></el-input>
            <span v-show="currentEdit!=scope.$index">{{scope.row.address}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="tel" label="联系电话" width="180">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.tel"
              placeholder="填写手机号码"
              type="number"
              clearable
              size="small"
              v-show="currentEdit==scope.$index"
            ></el-input>
            <span v-show="currentEdit!=scope.$index">{{scope.row.tel}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="post_code" label="邮政编码" width="180">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.post_code"
              placeholder="填写邮编"
              type="number"
              clearable
              size="small"
              v-show="currentEdit==scope.$index"
            ></el-input>
            <span v-show="currentEdit!=scope.$index">{{scope.row.post_code}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <div v-show="currentEdit!=scope.$index">
              <i class="el-icon-edit main-ico-btn" @click="currentEdit=scope.$index"></i>
              <i class="el-icon-delete main-ico-btn" @click="handleRemove(scope.$index)"></i>
            </div>
            <div v-show="currentEdit==scope.$index">
              <el-button size="mini" @click="handleSave(scope.$index)">保存</el-button>
              <el-button size="mini" @click="currentEdit=-1">取消</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 底部 -->
      <div class="divider">
        <el-button size="small" round style="float:right;" @click="dialogFormVisible = true">新增地址</el-button>
      </div>
      <el-dialog title="请填写您的收货地址" :visible.sync="dialogFormVisible" width="40%" top="20vh">
        <el-form :model="addressForm" style="margin-top:30px;">
          <el-form-item label="姓名：" label-width="60px">
            <el-input v-model="addressForm.name" autocomplete="off" size="small"></el-input>
          </el-form-item>
          <el-form-item label="地址：" label-width="60px">
            <el-input v-model="addressForm.address" autocomplete="off" size="small"></el-input>
          </el-form-item>
          <el-form-item label="电话：" label-width="60px">
            <el-input v-model="addressForm.tel" autocomplete="off" type="number" size="small"></el-input>
          </el-form-item>
          <el-form-item label="邮编：" label-width="60px">
            <el-input v-model="addressForm.post_code" autocomplete="off" type="number" size="small"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="addAddress" size="small">保 存</el-button>
        </div>
      </el-dialog>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import Table from "@/components/Table.vue";
import gameOrder from "./components/gameOrder";
import goodsOrder from "./components/goodsOrder";
import hasSold from "./components/HasSold";
import onSell from "./components/OnSell";
import { mapGetters } from "vuex";
export default {
  components: {
    Table,
    gameOrder,
    goodsOrder,
    hasSold,
    onSell
  },
  data() {
    return {
      isLoaded: false,
      currentEdit: -1,
      integralDetail: {
        requestData: {
          urlPath: "/log/integrallog",
          postData: {
            pageNum: 1,
            pageSize: 20
          }
        },
        tableData: []
      },

      orderDetail: {
        requestData: {
          urlPath: "/order/list?type=game",
          postData: {
            filterType: "",
            filterText: "",
            pageNum: 1,
            pageSize: 20
          }
        },
        tableData: []
      },

      addressList: [],
      dialogFormVisible: false,

      addressForm: {
        name: "",
        address: "",
        tel: "",
        post_code: ""
      }
    };
  },
  methods: {
    integralDetailListHander(e) {
      this.integralDetail.tableData = e;

      this.isLoaded = true;
    },
    orderDetailListHander(e) {
      this.orderDetail.tableData = e;
      this.isLoaded = true;
    },
    addAddress() {
      this.$http
        .post("/user/addaddress", this.addressForm)
        .then(res => {
          this.addressList.push(this.addressForm);
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    async handleRemove(index) {
      await this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      });
      this.$http
        .post("/user/deladdress", {
          uuid: this.addressList[index].uuid
        })
        .then(res => {
          this.addressList.splice(index, 1);
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    handleSave(index) {
      this.$http
        .post("/user/updateaddress", this.addressList[index])
        .then(res => {
          this.$message({
            message: res.msg,
            type: "success"
          });
          this.currentEdit = -1;
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    }
  },
  computed: {
    ...mapGetters(["user"])
  },
  created() {
    this.$store.dispatch("user_check");
    this.$http
      .post("/user/getaddress", {})
      .then(res => {
        this.addressList = res.data;
      })
      .catch(err => {
        this.$message.error(err.msg);
      });
  }
};
</script>
<style scoped>
.integral-box {
  height: 40px;
  line-height: 40px;
  color: #000;
}
.divider {
  margin: 27px 0;
  border-top: 1px dashed #aeb0b0;
  padding: 7px 0;
  text-align: right;
}
</style>
